<template>
  <view class="index-own">
    <view class="own-header">
      <view class="own-fl">
        <image
          :src="userInfo.head_img"
          mode="scaleToFill"
          v-if="isLogin && userInfo.head_img"
        />
        <image src="./images/logo.png" mode="scaleToFill" v-else />
      </view>
      <view class="own-fr">
        <view class="own-name" v-if="isLogin">
          {{ userInfo.mobile }}
          <view class="own-vip" v-if="userInfo.vip_level != 0"></view>
        </view>
        <view class="own-name" @tap="toLogin" v-else>
          登录
        </view>
        <view class="own-msg">
          <block v-if="isLogin">欢迎登录亿车商</block>
          <block v-else>登录亿车商，让天下车商智享未来</block>
        </view>
      </view>
    </view>
    <view class="own-list">
      <view class="list-view">
        <view class="own-fl">
          <text class="icon own-tel"></text>
          招商合作
        </view>
        <view
          class="own-fr"
          @tap="copyText"
          :data-text="config.cooperation_mobile"
        >
          {{ config.cooperation_mobile }}
        </view>
      </view>
      <view class="list-view" @tap="aboutUs">
        <view class="own-fl">
          <text class="icon own-own"></text>
          关于我们
        </view>
        <view class="own-fr">
          <van-icon name="arrow" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Taro from '@tarojs/taro'
import { navigateTo, toLogin } from '@utils/index'
import { getConfig } from '@requests/user'
export default {
  name: 'User',
  data() {
    return {
      value: '',
      config: {
        cooperation_mobile: '',
        abort_our: ''
      }
    }
  },
  components: {},
  created() {
    this.getConfig()
  },
  computed: {
    isLogin() {
      return !!this.$store.state.user.token
    },
    userInfo() {
      return this.$store.state.user.userInfo
    }
  },
  methods: {
    copyText(e) {
      wx.setClipboardData({
        data: e.currentTarget.dataset.text,
        success: function(res) {
          wx.getClipboardData({
            success: function(res) {
              wx.showToast({
                title: '已复制到剪切板'
              })
            }
          })
        }
      })
    },
    toLogin,
    getConfig() {
      getConfig().then(res => {
        this.config = res.result
      })
    },
    aboutUs() {
      navigateTo('user/about', {
        url: this.config.abort_our
      })
    }
  }
}
</script>

<style>
.index-own {
  background: #f9f9f9;
}
.own-list {
  background: #fff;
}
.list-view {
  padding: 1.02rem 0.8rem;
  border-bottom: 2px solid rgba(238, 238, 238, 0.5);
  overflow: hidden;
}
.list-view .own-fl {
  float: left;
  width: 30%;
  font-size: 0.865rem;
}
.list-view .own-fr {
  float: right;
  width: 40%;
  text-align: right;
}
.list-view .icon {
  display: inline-block;
  width: 45px;
  height: 45px;
  margin-right: 8rpx;
  background-size: cover;
  vertical-align: middle;
}
.list-view .own-fr text {
  font-size: 1.02rem;
}
.own-tel {
  background: url('./images/tel.png') bottom center no-repeat;
}
.own-own {
  background: url('./images/own.png') bottom center no-repeat;
}
.own-header {
  background-color: #fff;
  padding: 0.8rem;
  margin-bottom: 0.8rem;
}
.own-header .own-fl {
  float: left;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.own-header .own-fl image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.own-header .own-fr {
  margin-left: 150rpx;
}
.own-header .own-fr .own-name {
  font-size: 1.12rem;
  font-weight: bold;
  margin: 0.5rem 0 0.3rem;
}
.own-header .own-fr .own-msg {
  display: block;
  font-size: 0.9625rem;
  color: #666;
}
.own-vip {
  display: inline-block;
  width: 90px;
  height: 36px;
  background: url('https://yiche-static.oss-cn-hangzhou.aliyuncs.com/ycsk/vip_img.png')
    bottom center no-repeat;
  margin-left: 8rpx;
  background-size: cover;
  vertical-align: middle;
}
</style>
